<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>spring mvc</title>
<#include "/include/common.ftl">
    <script type="text/javascript" src="/assets/js/util.js"></script>
    <script language="javascript" type="text/javascript" src="/assets/lib/My97DatePicker/WdatePicker.js"></script>
</head>
<body>

<div class="row">
    <!-- get方式 -->
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading">get方式</div>
            <div class="panel-body">
                <p>提交方式：/mvc/getPathJson/param1/param2.htm</p>
                <input type="button" value="测试get_json_param方式" onclick="mvcParam.getPathJson()"/><br><br>
                <a href="/mvc/get/13735489562/石头.htm">get参数</a>
                <span>后台值：${age}-${address}</span>
                <hr>
                <a href="/mvc/get.htm?name=wen&phone=null">get参数</a>
                <span>后台值：${name}-${phone}</span><br><br>
                <input type="button" value="测试get_param方式" onclick="mvcParam.getJson()"/>
                <p>提交方式：/mvc/getJson.htm?name=mm&phone=1375845</p>
            </div>
        </div>
    </div>

    <!-- post ajax方式 -->
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading">post提交</div>
            <div class="panel-body">
                <p>提交方式：json数组字符串，'[{"userName":"a","password":123},{"userName":"b","password":456}]'</p>
                <input type="button" value="测试Post_json_list" onclick="mvcParam.ajaxPostList()"/><br/>
                <div id="dataDiv"></div>
                <hr>
                <div>
                    <span>ajax提交，后台通过单个参数获取</span>
                    <input type="button" value="测试Post_Param" onclick="mvcParam.ajaxPostParam()"/><br/>
                    <span>ajax提交，后台通过对象接收</span>
                    <input type="button" value="测试Post_Object" onclick="mvcParam.ajaxPostObject()"/><br/>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-md-5">
    <div class="list-group">
        <a href="/mvc/form.htm" class="list-group-item" target="_blank">form表单提交</a>
        <a href="/mvc/ajaxDiv.htm" class="list-group-item">div内元素ajax提交</a>
        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item">Vestibulum at eros</a>
    </div>
</div>

</body>
</html>
<script>
    var mvcParam = {
        //GET方式参数，路径后:?param1=val&...
        getJson: function () {
            $.ajax({
                type: "GET",
                url: "/mvc/getJson.htm",
                data: {"name": "mmm", "phone": "1375845"},
                dataType: "json",
                success: function (msg) {
                    alert("后台返回json值：" + msg.data.phone + "-" + msg.data.name);
                }
            });
        },

        //GET方式参数，URL中嵌入
        getPathJson: function () {
            $.ajax({
                type: "GET",
                url: "/mvc/getPathJson/男/137.35.482266.htm",
                dataType: "json",
                success: function (msg) {
                    alert("后台返回json值：" + msg.data.sex + "-" + msg.data.phone);
                }
            });
        },

        //ajax提交json数组，后台以list对象接收
        ajaxPostList: function () {
            //json数组对象
            var jsonList = [];
            jsonList.push({"userName": "a", "password": 123});
            jsonList.push({"userName": "bb", "password": 789});
            $.ajax({
                type: "POST",
                url: "/mvc/ajaxPostList.htm",
                data: JSON.stringify(jsonList),//json对象转换json字符串
                contentType: "application/json",
                dataType: "html",
                success: function (msg) {
                    $("#dataDiv").html(msg);
                    console.log(msg);
                }
            });
        },

        //ajaxPost,后台通过对应的参数名获取
        ajaxPostParam: function () {
            var jsonObject = {"productId": 2934, "num": 2};
            $.ajax({
                type: "POST",
                url: "/mvc/ajaxPostParam.htm",
                data: jsonObject,
                dataType: "json",
                success: function (msg) {
                    console.log(msg);
                }
            });
        },

        //ajaxPost,后台通过对象接收，在对象里再对应各个参数
        ajaxPostObject: function () {
            var jsonObject = {"productId": 2659, "num": 8};
            $.ajax({
                type: "POST",
                url: "/mvc/ajaxPostObject.htm",
                data: jsonObject,//发送给服务器内容编码，默订表单
                dataType: "json",
                success: function (msg) {
                    console.log(msg);
                }
            });
        }
    }
</script>